<template>
  <div>
    <div
      class="m-current"
    >
      <van-row>
        <van-col span="4">管家</van-col>
        <van-col span="15">所属门店</van-col>
        <van-col span="5">星级</van-col>
      </van-row>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <van-swipe-cell v-for="item in list" :key="item.id" class="m-s-cell-boss">
        <van-row class="m-yy">
          <van-col span="4">{{ item.keeper }}</van-col>
          <van-col span="15">{{ item.salon }}</van-col>
          <van-col span="5">
            <van-rate
              v-model="item.star"
              :size="10"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </van-col>
        </van-row>
        <template #right>
          <van-button
            square
            type="info"
            text="评级"
            @click="setRate"
          />
        </template>
      </van-swipe-cell>
    </van-list>
    <van-popup
      v-model="show"
      closeable
      :style="{ height: '40%', width: '96%' }"
    >
      <div style="text-align: center;">
        <p style="font-size: 20px;">管家：张管家</p>
        <van-rate
          v-model="star"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
        <van-cell-group style="margin: 10px;">
          <van-field v-model="value" rows="2" autosize type="textarea" placeholder="请输入评级说明" />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import 'vue-lunar-calendar-pro/dist/calendar.css'
import Button from 'vant/lib/button'
import List from 'vant/lib/list'
import CellGroup from 'vant/lib/cell-group'
import Cell from 'vant/lib/cell'
import SwipeCell from 'vant/lib/swipe-cell'
import Popup from 'vant/lib/popup'
import Field from 'vant/lib/field'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'
import 'vant/lib/field/style'
import 'vant/lib/popup/style'
import 'vant/lib/button/style'
import 'vant/lib/list/style'
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'
import 'vant/lib/swipe-cell/style'
import Rate from 'vant/lib/rate'
import 'vant/lib/rate/style'
// import { mapGetters } from 'vuex'
// import { getShopClerks, addClerk, editClerk, getSalon } from '@/api/txs'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Notify.name]: Notify,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [SwipeCell.name]: SwipeCell,
    [List.name]: List,
    [Rate.name]: Rate
  },
  data () {
    return {
      star: 0,
      value: '',
      show: false,
      list: [],
      loading: false,
      finished: false,
    }
  },
  computed: {
    // ...mapGetters(['openId'])
  },
  created () {
    // this.fetchData()
  },
  methods: {
    // fetchData () {
    //   getSalon(this.openId).then(res => {
    //     this.salon = res.data.data
    //   })
    // },
    onLoad () {
      this.loading = false
      // getShopClerks(this.openId).then(res => {
      //   this.list = res.data.data
      // })
      this.list = [
        { keeper: '大管家', star: 0, salon: '11111111美容院' },
        { keeper: '张管家', star: 1, salon: '222222222美容院' },
        { keeper: '李管家', star: 5, salon: '3333333333美容院' }
      ]
      this.finished = true
    },
    setRate() {
      this.show = true
    }
  }

}
</script>
<style lang="scss">
.m-s-cell-boss {
  .van-swipe-cell__left {
    top: -20px;
  }
  .van-swipe-cell__right {
    top: -20px;
  }
}
.m-boss-calendar.showWeek.calendar-pro > div > table {
  thead {
    display: none;
  }
  td {
    .info-lunar {
      bottom: 0;
      right: 0;
      font-size: 20px;
    }
  }
}
</style>
<style lang="scss" scoped>
.m-yy {
  background-color: #fff;
    font-size: 26px;
    line-height: 80px;
    text-align: center;
    // box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 3px;
}
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 5px rgb(201, 201, 201);
  margin-bottom: 2px;
}
.m-current{
  background-color: #fff;
  line-height: 30px;
  font-size: 20px;
  color: rgb(184, 184, 184);
  text-align: center;
}
.m-add {
  margin-bottom: 10px;
}
.m-div {
  font-size: 30px;
  font-weight: bold;
}
.m-p {
  font-size: 24px;
}
.m-salon-field {
  margin-right: 200px;
}
</style>
